<template>
    <view style="margin-bottom: 29upx">
        <MmvTabs :tabs="tabs" @change="onChange">
            <template #default="{item}">
                <!-- 菜单 -->
                <MmvMenus v-if="item.menus" :menus="item.menus"></MmvMenus>
                <!-- 车辆购买组件 -->
                <MmvVehiclePurchase v-if="item.components=='MmvVehiclePurchase'"></MmvVehiclePurchase>
            </template>
        </MmvTabs>
    </view>
</template>

<script>
import forEach from 'lodash/forEach';
import map from 'lodash/map';
import MmvTabs from '@/components/layout/mmv-tabs.vue';
import MmvMenus from '@/components/layout/mmv-menus.vue';
import MmvVehiclePurchase from './mmv-vehicle-purchase.vue';
import * as homeApi from '@/common/apis/home-api.js';


export default {
    components: {
        MmvTabs,
        MmvMenus,
        MmvVehiclePurchase
    },
    props: {
        values: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            tabs: [],
            activeTab: 0,
        };
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
		isNotLogin() {
			return uni.$u.test.isEmpty(this.$store.state.user.userInfo) || uni.$u.test.isEmpty(this.$store.state.user.userInfo.phone);
		},
		deptId() {
		    return this.$store.state.user.deptId;
		},
    },
    watch: {
        openid(val) {
            // console.log('watch_openid', val);
            // this.getList();
        },
    },
    mounted() {
		
		console.log('MmvMenu加载了');
		
		uni.$on('store_selected', res=>{
			console.log('门店选择好了，开始调首页接口')
			this.getList();
		})
		
		uni.$on('login', res=>{
			this.getList();
		})
		
		uni.$on('logout', res=>{
			this.getList();
		})
		
    },
    methods: {
        async getList() {
            try {
                let result;
                if (!this.isNotLogin && !uni.$u.test.isEmpty(this.$store.state.user.openid)) {
					
					console.log('tab布局加载了，登录');
					
                    result = await homeApi.indexlogin({
						deptId:this.deptId,
					});
                } else {
					
					console.log('tab布局加载了，未登录');
					
                    result = await homeApi.indexnotlogin({
						deptId:this.deptId,
					});
                }
                // console.log('getList_menu_result', result);
                // this.$store.commit('home/setAdvertList', result.advertList || []);
                await this.serializeTabs(result.tabList);
                await this.getTab(this.tabs[this.activeTab]);
            } catch (error) {
                console.log(error)
            }
        },
        async getTab(tab) {
			console.log('getTab', tab);
			
            const result = await homeApi.tabType({ type: tab.dictCode });
            tab.menus = map(result, val => {
                return {
                    url: '',
                    icon: val.dictImg,
                    label: val.dictValue,
                    templateIdList: val.templateIdList,
                }
            });
            console.log(result);
        },
        async serializeTabs(values) {
            const tabs = [];
            forEach(values, val => {
                if (val.dictValue == '车辆购买') {
                    tabs.push({
                        label: '车辆购买',
                        components: 'MmvVehiclePurchase',
                        ...val,
                    });
                } else {
                    tabs.push({
                        label: val.dictValue,
                        menus: map(val.childList, menu => {
                            return {
                                url: '',
                                icon: menu.dictImg,
                                label: menu.dictValue,
                            };
                        }),
                        ...val,
                    });
                }

            });
            console.log('tabs', tabs)
            this.tabs = tabs;
            return tabs;
        },
        onChange(tab, index) {
            // console.log(tab, index);
            this.getTab(tab);
            this.activeTab = index;
            this.$store.dispatch('home/getHomeData', tab.label);
        }
    },
};
</script>

<style></style>
